import React, { useEffect, useContext } from "react";
import {
    Form,
    Input,
    Radio,
    Modal,
    message,
} from 'antd';
import JSEncrypt from 'jsencrypt';
import { useSelector } from "react-redux";
import { AccountContext } from "./store";
import { getAccountDetail, createAccount, updateAccount } from "./../../api/account";
import type { RootState } from "../../store";
import type { accountFormType, accountReqFormType, userType } from '../../types/accountType'

const AddOrEdit = () => {

    const [form] = Form.useForm();
    const { state, dispatch } = useContext(AccountContext);
    const publicKey = useSelector((state: RootState) => state.userInfo.publicKey);
    const onFinish = (e: accountFormType) => {
        const encryptor = new JSEncrypt();
        encryptor.setPublicKey(publicKey);
        const password = encryptor.encrypt(e.password ? e.password : "") as string;
        const obj: accountReqFormType = {
            ...e,
            password: e.password ? password : ""
        }

        if (state.type === "add") {
            createAccount(obj).then(res => {
                if (res.code === 0) {
                    message.success('创建成功');
                    dispatch({ type: "CHANGE_ADDOREDIT", payLoad: false });
                }
            })
        } else {
            updateAccount({ ...obj, userId: state.user.userId }).then(res => {
                if (res.code === 0) {
                    message.success('编辑成功');
                    dispatch({ type: "CHANGE_ADDOREDIT", payLoad: false });
                }
            })
        }
    }
    const handBannerDetail = (e: userType) => {
        getAccountDetail(e).then(res => {
            if (res.code === 0) {
                form.setFieldsValue(res.data);
            }
        })
    }
    useEffect(() => {
        form.resetFields();
        if (state.addOrEdit && state.user && state.type === 'edit') {
            handBannerDetail(state.user)
        }
    }, [state.addOrEdit])
    return (
        <>
            <Modal title={state.type === "add" ? "创建" : "编辑"} open={state.addOrEdit} onOk={form.submit} onCancel={
                () => dispatch({ type: "CHANGE_ADDOREDIT", payLoad: false })
            }>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 20 }}
                    layout="horizontal"
                    onFinish={onFinish}
                    form={form}
                    style={{ maxWidth: 600 }}
                >
                    <Form.Item<accountFormType> name={"username"} label="姓名">
                        <Input />
                    </Form.Item>
                    <Form.Item<accountFormType> name={"account"} label="账户">
                        <Input />
                    </Form.Item>
                    <Form.Item<accountFormType> name={"phone"} label="手机号">
                        <Input />
                    </Form.Item>
                    <Form.Item<accountFormType> name={"password"} label="密码">
                        <Input.Password />
                    </Form.Item>
                    <Form.Item<accountFormType> name={"state"} label="状态">
                        <Radio.Group>
                            <Radio value={1}> 正常 </Radio>
                            <Radio value={2}> 停用 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item<accountFormType> name={"remark"} label="备注">
                        <Input.TextArea />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default AddOrEdit;